<?php

use yii\helpers\Html;
use yii\helpers\Url;

?>

<!-- <h1>老会员绑定</h1>

<form class="form" id="binding" method="post">

	请输入手机号来完成绑定
	<input type="text" name="mobile" class="form-control">

	<button type="submit">提交</button>
</form> -->
<style>
	.weui-vcode-btn{
		color: #18b4ed
	}
	.olduserBindPage .weui_input{
		width: 100%;
		border: 0;
		outline: 0;
		-webkit-appearance: none;
		background-color: transparent;
		font-size: inherit;
		color: inherit;
		line-height: 1.5;
	}
	.weui_cell{
		border-top-color: #e5e5e5;
	}
	.weui_cell:last-child{
		border-bottom-color: #e5e5e5;
	}
	.weui_cell .weui_cell_bd{
		padding: 0 
	}
	.weui-vcode-btn{
		height: 66px;
		line-height: 66px
	}
</style>
<div class="center olduserBindPage">  
	<header class="info_header">
		<div class="logo-box">
			<img src="<?= Url::to('@web/jebsen/img/header.png')?>" alt="">
		</div>
	</header>
	<div class="js-mobile" style="margin-top:20px">
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell" style="border-bottom:none;border-top: none;height: 66px;">
				<div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
				<div class="weui_cell_bd weui_cell_primary">
					<input id="mobile" name="mobile" class="weui_input" type="tel" required="" pattern="[0-9]{11}" maxlength="11" placeholder="输入你的手机号" emptytips="请输入手机号" notmatchtips="请输入正确的手机号">
				</div>
				<div class="weui_cell_ft">
					<i class="weui_icon_warn"></i>
				</div>
			</div>
		</div>
	</div>
	<div class="js-verification_code">
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell weui_vcode" style="height: 66px;">
				<div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
				<div class="weui_cell_bd weui_cell_primary">
					<input id="verification_code" name="verification_code" class="weui_input" pattern="[0-9]{6}" maxlength="6" type="tel" required="" placeholder="点击获取验证码" tips="请输入6位数验证码">
				</div>
				<div class="weui_cell_ft">
					<i class="weui_icon_warn"></i>
					<a href="javascript:;" class="weui-vcode-btn js-get-verification_code">获取验证码<span class="js-countdown" style="color:#f43530"></span></a>
				</div>
			</div>
		</div>
	</div>
	<div class="weui_btn_area" style="margin-top:40px">
		<button class="weui_btn bg-blue js-submitBtn">提&nbsp;交</button>
	</div>
</div>
<!-- <div class="weui_mask"></div>
<div class="weui-custom-pop redeempop">
    <div class="close js-propHide" >
        <i class="icon icon-95 f25"></i>
    </div>
    <div class="weui-custom-hd f16">
        請輸入核銷密碼
    </div>
    <div class="weui-custom-bd">
        <input type="tel" class="weui_input" id="redeem_code" placeholder="密碼" style="border-color:black">
        <div class="confirm_res_msg"></div>
    </div>
    <div class="weui-custom-ft">
        <button class="js-propHide f-black">取消</button>
        <button class="js-redeemConfirm f-black">确定</button>
    </div>
</div> -->
<script>
var sendSmsUrl = "<?= Url::to(['binding/send-sms']) ?>";
var checkSubmitUrl = "<?= Url::to(['binding/check-submit']) ?>";

window.onload = function () {
	var $mobileForm = $(".js-mobile")
	$mobileForm.form();
	var count = 0;
	var mobile_bak = ''
	$(".js-get-verification_code").on("click", function(){
		$mobileForm.validate(function(error){
			if(error){
				
			}else{
				if(count>0) {
					$.toptips('验证码正在发送,请耐心等待','info');
					return
				}
				$.toptips('验证码正在发送,请稍后...','ok');
				var mobile = $("#mobile").val();
				var countdown = $(".js-countdown")
				count = 60
				var timer = setInterval(function(){
					if(count>0){
						countdown.html(count)
						count--
					} else {
						countdown.html('')
						clearInterval(timer)
						timer = null
					}

				},1000)
				mobile_bak = mobile
				$.post(sendSmsUrl, {mobile: mobile}, function(re){
					if(re.status == 'success'){
						$.toptips('请填入手机收到的验证码','ok');
					} else {
						$.toptips('验证码发送失败,请稍后再试');
					}
				},'json');
			}
		});
		
	});
	var $form = $(".olduserBindPage");
	$form.form();
	$(".js-submitBtn").on("click", function(){
		var _this = this ;
		$(_this).attr('disabled',true)
		$form.validate(function(error){
			if(error){
				$(_this).removeAttr('disabled')
			}else{
				var mobile = $("#mobile").val();
				if(mobile != mobile_bak) {
					$.toptips('请重新发送验证码或使用获取验证码的手机号');
					$(_this).removeAttr('disabled')
					return
				}
				var verification_code = $("#verification_code").val()
				$.showLoading("请稍后")
				$.post(checkSubmitUrl, {mobile, verification_code}, function(re){
					$.hideLoading()
					if(re.status == 'success'){
						$.toptips(re.message, 'ok');
						window.location.href = re.redirect_url
					} else {
						$.toptips(re.message);
						$(_this).removeAttr('disabled')
					}
				},'json');
			}
		});
		
	});
	
}


</script>
<?php
// $this->registerJsFile('@web/jselect/js/couponlist.js', ['depends' => [\app\assets\JselectAsset::className()]]);
?>